<template>
  <!-- 新增部门的弹层 -->
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogShow"
    :before-close="handleClose"
  >
    <!-- 表单组件  el-form   label-width设置label的宽度   -->
    <!-- 匿名插槽 -->
    <el-form ref="form" label-width="120px" :model="formData" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formData.name" style="width:80%" placeholder="请输入部门名称" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formData.code" style="width:80%" placeholder="请输入部门编码" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="formData.manager" style="width:80%" placeholder="请选择部门负责人" @focus="getEmployeeSimple">
          <!-- 遍历部门负责人数据生成下拉框 -->
          <el-option v-for="item in peoples" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="formData.introduce" style="width:80%" placeholder="请输入部门介绍" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <el-row slot="footer" type="flex" justify="center">
      <!-- 列被分为24 -->
      <el-col :span="6">
        <el-button size="small" @click="handleClose">取消</el-button>
        <el-button type="primary" size="small" @click="submitFn">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getDepartments, addDepartments, getDepartmentsDetail, editDepartments } from '@/api/departments.js'
import { getEmployeeSimple } from '@/api/employees.js'
export default {
  name: 'AddDepts',
  props: {
    dialogShow: {
      type: Boolean,
      required: true
    },
    treeNode: {
      type: Object,
      default: null
    }
  },
  data() {
    // 由于需要区分编辑和新增功能,因此校验函数也需要同步处理
    const checkNameRepeat = async(rule, value, callback) => {
      const { depts } = await getDepartments()// 获取最新的组织架构
      // console.log(depts)
      let isRepeat = false
      if (this.formData.id) {
        // 编辑的校验规则===我的名字不能跟其他同级部门的名字重复,首先找到跟我同一个部门的所有子部门,在子部门里排除我自己
        isRepeat = depts.filter(item => item.pid === this.treeNode.pid && item.id !== this.treeNode.id).some(item => item.name === value)
        // const child = depts.filter(item => item.pid === this.treeNode.pid)
        // console.log(child, '所有跟我同部门的')
      } else {
        // 新增模式的校验规则
        // console.log(depts, '自定义校验规则')
        const children = depts.filter(item => item.pid === this.treeNode.id)// 找到同级部门下的所有子部门
        isRepeat = children.some(item => item.name === value)// 跟所有的子部门比较有没有名称相同的
      }
      isRepeat ? callback(new Error(`同级已存在${value}部门`)) : callback()// 相同校验不通过
    }
    const checkCodeRepeat = async(rule, value, callback) => {
      let isRepeat = false
      const { depts } = await getDepartments()// 获取最新的组织架构
      if (this.formData.id) {
        // 编辑模式
        isRepeat = depts.some(item => item.id !== this.treeNode.id && item.code === value && value)// 除了我自己别人都不可以跟我相同
      } else {
        // 新增模式
        isRepeat = depts.some(item => item.code === value && value)// 所有的部门编码都不能重复
      }
      isRepeat ? callback(new Error('部门编码不能重复')) : callback()// 相同校验不通过
    }
    return {
      // 定义表单数据
      formData: {
        name: '', // 部门名称--统计部门中禁止出现同名的
        code: '', // 部门编码--部门编码在整个模块中都不允许重复
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      peoples: {}, // 存储部门负责人信息--接口获取
      // 定义校验规则
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '部门名称要求1-10个字符', trigger: 'blur' },
          // 自定义函数的形式校验
          { trigger: 'blur', validator: checkNameRepeat }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '部门编码要求1-10个字符', trigger: 'blur' },
          { trigger: 'blur', validator: checkCodeRepeat }
        ],
        manager: [{ required: true, message: '部门负责人不能为空', trigger: 'blur' }],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { trigger: 'blur', min: 1, max: 50, message: '部门介绍要求1-50个字符' }
        ]
      }
    }
  },
  computed: {
    dialogTitle() {
      if (this.formData.id) {
        return '编辑部门'
      } else {
        return '新增部门'
      }
    }
  },
  methods: {
    // 提交按钮点击事件===处理编辑和新增
    async  submitFn() {
      // 表单校验通过之后才能调用接口
      await this.$refs.form.validate()
      if (this.formData.id) {
      // 调用编辑接口
        await editDepartments(this.formData)
        // console.log(res)
        this.$message.success('编辑成功')
      } else {
        // 调用接口新增部门
        await addDepartments({
          ...this.formData, // 弹框的表单数据
          pid: this.treeNode.id// 部门pid就是当前操作部门的id
        })
        // console.log(res)
        // 提示成功
        this.$message.success('新增成功')
      }
      // 关闭弹框,由于编辑和新增成功之后执行的逻辑都是刷新和关闭弹框,因此共用一个事件就可以了
      this.handleClose()
      // 通知父组件更新页面
      this.$emit('addDepts')
    },
    // 定义获取部门详情方法,通过$refs让父组件的editDepts去调用
    async  getDepartmentsDetail(id) {
      this.formData = await getDepartmentsDetail(id)// 将获取的部门详情数据回显给formData
      // console.log(res)
    },
    // 处理关闭弹框之前的逻辑
    handleClose() {
      // 1.重置还原表单
      this.formData = {
        formData: {
          name: '', // 部门名称--统计部门中禁止出现同名的
          code: '', // 部门编码--部门编码在整个模块中都不允许重复
          manager: '', // 部门管理者
          introduce: '' // 部门介绍
        }
      }
      // 2.通知父组件关闭弹框,可以使用.sync修饰符实现父子组件双向绑定
      this.$emit('update:dialogShow', false)
      // 3.重置表单校验
      this.$refs.form.resetFields()
    },
    // 获取部门负责人,在下拉框的focus事件调用
    async getEmployeeSimple() {
      const res = await getEmployeeSimple()
      // console.log(res)
      this.peoples = res// 拿到部门负责人的数据存储起来
    }
  }

}
</script>

<style>

</style>
